import { memo } from 'react'
import { Link } from 'react-router-dom'

const FAVORITED_CLASS = 'btn btn-sm btn-primary';
const NOT_FAVORITED_CLASS = 'btn btn-sm btn-outline-primary';

const ArticleItem = memo(({ article }) => {
    return (
        <div className='article-preview'>
            {/* 上 */}
            <div className='article-meta'>
                <Link to={`/${article.author.username}/profile`}>
                    <img src={article.author.avatar || "https://gu0nuli.github.io/reactStatic/react_static/v1_111.jpg"} alt={article.author.username} />
                </Link>

                <div className='info'>
                    <Link to={`/${article.author.username}/profile`}>
                        {article.author.username}
                    </Link>
                    <span>
                        {new Date(article.createdAt).toDateString()}
                    </span>
                </div>

                <div className='pull-xs-right'>
                    <button className={article.isFavorite ? FAVORITED_CLASS : NOT_FAVORITED_CLASS }>
                    <i class="fa fa-heart-o"></i> {article.favoriteCount}
                    </button>
                </div>
            </div>
            {/* 下 */}
            <Link to={`/article/${article.slug}`} className='preview-link'>
                <h1>{article.title}</h1>
                <p>{article.description}</p>
                <span>详情...</span>
                <ul className='tag-list'>
                    {
                        article.tags.map(tag=>{
                            return(
                                <li className='tag-default tag-pill tag-outline' key={tag}>{tag}</li>
                            )
                        })
                    }
                </ul>
            </Link>
        </div>
    )
})



export default ArticleItem